<template>
  <div>
    <el-card class="box-plot-card">
      <div slot="header">订单响应速度率</div>
      <el-row>
        <el-divider></el-divider>
        <el-col :span="8" style="width: 100%;">
          <el-form class="demo-form-inline" :inline="true">
            <el-form-item label="时间">
              <el-select v-model="orderTime" placeholder="订单时间">
                <el-option label="按日" value="按日"></el-option>
                <!-- 其他时间选项 -->
              </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
              <el-date-picker v-model="OrdersDto.startTime" type="date" placeholder="开始时间"
              ></el-date-picker>
              <el-date-picker v-model="OrdersDto.endTime" type="date" placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="订单类型">
              <el-select v-model="orderType" placeholder="订单类型">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="实时自叫车" value="1"></el-option>
                <el-option label="预约自叫车" value="2"></el-option>
                <el-option label="实时代叫车" value="3"></el-option>
                <!-- 1实时自叫车 2预约自叫车 3实时代叫车 其他订单类型选项 -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryData">查询</el-button>
              <el-button type="success" @click="exportData">导出</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div ref="chart" style="width: 100%; height: 400px;"></div>
    </el-card>
  </div>
</template>

<script>
import ExcelJS from "exceljs";
import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      cityLevel: '全部',
      city: '全部',
      district: '全部',
      orderTime: '按日',
      startTime: '',
      endTime: '',
      orderType: '全部',
      DatesInRange:[],
      OrdersDto:{
        startTime: null,
        endTime: null,
        orderTypes: null
      },
      arrayLists:[]
    };
  },
  mounted() {
    this.getDatesInRange();
  },
  methods: {
    drawChart() {
      let chart = this.$echarts.init(this.$refs.chart);
      // 模拟数据，实际数据应从接口获取
      let responseData = this.arrayLists
      chart.setOption({
        xAxis: {
          data: this.DatesInRange
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} S'
          }
        },
        series: [
          {
            name: '订单响应速度',
            type: 'boxplot',
            data: responseData
          }
        ]
      });
    },
    findDateAll(ordersDto){
      axios.post("http://localhost:9999/api-cockpit/orders/getBoxWhiskerList",ordersDto).then(res => {
        this.arrayLists = res.data.data;
        console.log(res)
        this.drawChart()
      })
    },
    getDatesInRange(ordersDto) {
      if (ordersDto == null) {
        ordersDto = {}
      }
      axios.post("http://localhost:9999/api-cockpit/orders/getDatesInRange", ordersDto).then(res => {
        this.DatesInRange = res.data.data;
        this.findDateAll(ordersDto)
      })
    },
    queryData() {
      this.getDatesInRange(this.OrdersDto);
      // 实现查询逻辑
    },
    exportData() {
      // 实现导出逻辑
      const workbook = new ExcelJS.Workbook(); // 创建工作簿
      const worksheet = workbook.addWorksheet('Sheet1'); // 添加工作表

      const chart = echarts.getInstanceByDom(this.$refs.chart) // 获取图表实例
      const base64Image = chart.getDataURL({
        pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍
        backgroundColor: '#fff' // 导出图片的背景色
      })
      let image = workbook.addImage({ // 添加图片
        base64: base64Image, // 图片的base64编码
        extension: 'png'  // 图片的扩展名
      });
      worksheet.addImage(image, 'A1:J20'); // 将图片添加到工作表中
      workbook.xlsx.writeBuffer().then(function (buffer) { // 生成excel文件的二进制数据
        saveAs.saveAs(new Blob([buffer], {  // 生成Blob对象
          type: 'application/octet-stream'  // 指定文件的MIME类型
        }), '订单响应速度率.xlsx');  // 指定文件名
      });
    }
  }
};
</script>

<style scoped>
.box-plot-card {
  margin-bottom: 20px;
}
</style>
